<template>
  <div
    class="c-pf c-p-t0 c-p-l0 c-p-r0 c-pz1003 c-h c-bg-black"
    v-if="isShowPreview"
  >
    <!-- 头部 -->
    <div class="c-pf c-p-t0 c-p-l0 c-p-r0 c-hh80 c-ph24 c-flex-row c-justify-center c-aligni-center c-pz10 c-translucent-balck40">
      <span class="c-fc-white c-fs24">{{options.activeIndex + 1}}/{{options.imgList.length}}</span>
      <span
        @click="handleClickClose()"
        class="c-pa iconfont c-fs36 c-ww80 c-hh80 c-p-r0 c-flex-row c-justify-center c-aligni-center c-fc-white"
      >&#xe750;</span>
    </div>
    <!-- 中部 -->
    <swiper
      class="c-h"
      :options="swiperOption"
      ref="previewImgSwiper"
      @slideChange="swpierChange"
    >
      <swiper-slide
        v-for="(item, index) in options.imgList"
        :key="index"
      >
        <div class="swiper-zoom-container">
          <img
            class="swiper-lazy"
            :style="{'transition-duration': '300ms', 'transform': index == options.activeIndex ? style: ''}"
            :data-src="item"
            alt=""
          >
          <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
  name: "PreviewImg",
  components: {
    swiper,
    swiperSlide
  },
  props: {
    isShowPreview: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: () => {
        return {
          activeIndex: 0,
          imgList: []
        }
      }
    }
  },
  data() {
    return {
      swiperOption: {},
      scale: 1,
      rotate: 0,
      style: `translate3d(0px, 0px, 0px) scale(1) rotate(0)`,
      index: 0,
    }
  },
  created() {
    let _this = this;
    this.swiperOption = {
      slidesPerView: 'auto',
      zoom: true, //开启缩放功能
      lazy: true, //开启图片加载
      on: {
        init: function () {
          _this.$nextTick(() => {
            _this.$refs.previewImgSwiper.swiper.slideTo(_this.options.activeIndex, 0, false)
          })
        },
        // zoomChange: function (scale, imageEl, slideEl) {
        //   _this.scale = scale;
        //   _this.style = `translate3d(0px, 0px, 0px) scale(${_this.scale}) rotate(${_this.rotate}deg)`
        // }
      }
    }
  },
  activated() {
    this.swiperOption = {};
    this.scale = 1;
    this.rotate = 0;
    this.style = `translate3d(0px, 0px, 0px) scale(1) rotate(0)`;
  },
  methods: {
    swpierChange() {
      this.scale = 1;
      this.rotate = 0;
      this.options.activeIndex = this.$refs.previewImgSwiper.swiper.activeIndex;
      this.style = `translate3d(0px, 0px, 0px) scale(${this.scale}) rotate(${this.rotate}deg)`
    },
    handleClickClose() {
      this.scale = 1;
      this.rotate = 0;
      this.style = `translate3d(0px, 0px, 0px) scale(1) rotate(0)`;
      this.isShowPreview = false;
      this.$emit("handleClickClose")
    },
    // handleClickleft() {
    //   this.rotate -= 90;
    //   this.style = `translate3d(0px, 0px, 0px) scale(${this.scale}) rotate(${this.rotate}deg)`
    // },
    // handleClickRight() {
    //   this.rotate += 90;
    //   this.style = `translate3d(0px, 0px, 0px) scale(${this.scale}) rotate(${this.rotate}deg)`
    // }
  }
}
</script>

<style lang="less" scoped>
.c-rotateY180 {
  transform: rotateY(180deg);
}
</style>